<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
        />
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {fileToken,fileurl} from '@/utils/request'
export default {
    components: { Editor, Toolbar },
    props:['value'],
    watch:{
        value:{
            handler (newData, oldData) {
                this.html = newData
            },
            immediate: true
        }
    },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: {
                // 插入附件上传
                insertKeys: {
                    index: 22, // 自定义插入的位置
                    keys: ['uploadAttachment'], // “上传附件”菜单
                },
            },
            editorConfig: { 
                placeholder: '请输入内容...',
                // 菜单
                // 附件上传
                hoverbarKeys:{
                    attachment: {
                        menuKeys: ['downloadAttachment'], // “下载附件”菜单
                    },
                },
                MENU_CONF:{
                    // 上传图片
                    uploadImage:{
                        // 服务器地址
                        server: fileurl(),
                        // 文件名称
                        fieldName:'file',
                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 2 * 1024 * 1024, // 2M
                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 10,
                        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['image/*'],
                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        meta: {
                            fileToken: fileToken(),
                        },
                        // 超时时间，默认为 10 秒
                        timeout: 10 * 1000, // 10 秒
                        // 自定义插入图片,服务端返回请求体不符合官方需求，因此使用自定义插入
                        /*
                            "data": {//官方要求的请求体
                                "url": "xxx", // 图片 src ，必须
                                "alt": "yyy", // 图片描述文字，非必须
                                "href": "zzz" // 图片的链接，非必须
                            }
                        */ 
                        customInsert(res, insertFn){
                            if(res.code == 0){
                                let url = res.obj.url
                                let alt = res.obj.baseName
                                let href = res.obj.url
                                // 从 res 中找到 url alt href ，然后插入图片
                                insertFn(url, alt, href)
                            }
                        }
                    },
                    // 上传视频
                    uploadVideo:{
                        // 服务器地址
                        server: fileurl(),
                        // 文件名称
                        fieldName:'file',
                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 2 * 1024 * 1024, // 2M
                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 10,
                        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['video/*'],
                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        meta: {
                            fileToken: fileToken(),
                        },
                        // 超时时间，默认为 10 秒
                        timeout: 10 * 1000, // 10 秒
                        // 自定义插入视频,服务端返回请求体不符合官方需求，因此使用自定义插入
                        /*
                            "data": {
                                "url": "xxx", // 视频 src ，必须
                                "poster": "xxx.png" // 视频封面图片 url ，可选
                            }
                        */ 
                        customInsert(res, insertFn){
                            if(res.code == 0){
                                let url = res.obj.url
                                let poster = ''
                                // 从 res 中找到 url alt href ，然后插入图片
                                insertFn(url, poster)
                            }
                        }
                    },
                    // 附件上传
                    uploadAttachment:{
                         // 服务器地址
                        server: fileurl(),
                        // 文件名称
                        fieldName:'file',
                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 2 * 1024 * 1024, // 2M
                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 10,

                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        meta: {
                            fileToken: fileToken(),
                        },
                        // 超时时间，默认为 10 秒
                        timeout: 10 * 1000, // 10 秒
                        // 自定义插入附件,服务端返回请求体不符合官方需求，因此使用自定义插入
                        /*
                            "data": {
                                "url": "附件的下载链接"
                            }
                        */ 
                        customInsert(res, file, insertFn) {
                            // 插入附件到编辑器
                            insertFn(`${file.name}`, res.obj.url)
                        },
                    }
                    
                }
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange(editor){
            this.$emit('input',this.html)
        }
    },
    mounted() {

    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style>

</style>